<!-- 查看成员 -->
<template>
  <dt-modal-info ref='info' :title='title' :label-width='100' :width='800'>
    <div slot='bottom' style="padding: 0 0 50px 0">
      <Tabs ref="nav" type="card" v-model="currentCard" :animated="false" name='checkUser'>
        <TabPane class="tab_pane" label="角色记录" name="roleLog">
          <role-log ref="roleLog" @changeTableSuccess='onChangeTableSuccess' />
        </TabPane>
        <TabPane class="tab_pane" label="比例记录" name="ratioLog">
          <ratio-log ref="ratioLog" @openProportion='openProportion' />
        </TabPane>
        <TabPane class="tab_pane" label="小组记录" name="groupLog">
          <change-table ref="changeTable" @changeTableSuccess='onChangeTableSuccess' />
        </TabPane>
      </Tabs>
    </div>
  </dt-modal-info>
</template>

<script>
  import Opt from './opt/checkUser'
  import roleLog from './roleLog.vue'
  import teamsApi from '@/biz/buildingManagement/teams'
  import ratioLog from './ratioLog.vue'
  import changeTable from '../group/changeLogTable.vue'
  export default {
    components: { roleLog, ratioLog, changeTable },
    data() {
      return {
        userMess: this.$dt.userInfo(),
        RowUserData: {},
        title: '查看成员',
        currentCard: 'roleLog'
      }
    },
    methods: {
      show(info) {
        this.currentCard = 'roleLog'
        this.RowUserData = info
        this.$refs.info.show(new Opt(this.RowUserData))
        this.init()
        this.roleLoginitData()
        this.ratioInitData()
      },
      openProportion(info) {
        //比例记录修改成功刷新成员列表
        this.$emit('onChangeTable')
      },
      init() {
        let params = {
          workNo: this.RowUserData.workNo,
          teamId: this.RowUserData.teamId,
        }
        teamsApi.changeRecordQuery({ ...params }).then((res) => {
          console.log(res, '小组记录')
          res && res.forEach(item => { item.workNo = this.RowUserData.workNo })
          this.$refs.changeTable.btnFlag = false
          this.$refs.changeTable.tableList = res
          this.$refs.changeTable.checkFlag = true
        })
      },
      roleLoginitData() {
        let params = {
          buildingId: this.RowUserData.buildingId,
          userId: this.RowUserData.userId
        }
        teamsApi.getUserLog(params).then(res => {
          console.log(res)
          this.$refs.roleLog.btnFlag = false
          this.$refs.roleLog.tableList = res
        })
      },
      ratioInitData() {
        let params = {
          buildingId: this.RowUserData.buildingId,
          userId: this.RowUserData.userId
        }
        teamsApi.getUserRatioLog(params).then(res => {
          console.log(res)
          this.$refs.ratioLog.tableList = res
        })
      },
      onChangeTableSuccess() {
        this.$emit('onChangeTable')
      }
    },
  }
</script>
<style lang='scss' scoped>
  .check_user {
    .col_warp {
      padding: 0 10px;
      display: flex;
      justify-content: center;
      font-size: 16px;
      margin-bottom: 15px;

      .label {
        width: 85px;
      }

      .content {
        flex: 1;
      }
    }

    .btn-operate {
      margin-top: 15px;
    }
  }
</style>